<template>
  <div class="index">
    <div class="container">
      <div class="swiper-box">
        <swiper v-bind:options="swiperOption">
          <swiper-slide v-for="(item,index) in slideList" v-bind:key="index">
            <a v-bind:href="'/#/product/'+item.id"><img v-bind:src="item.img"></a>
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
          <div class="swiper-button-prev" slot="button-prev"></div>
          <div class="swiper-button-next" slot="button-next"></div>
        </swiper>
      </div>
    </div>

    <div class="hot">

    </div>
  </div>
</template>

<script>
import IntroIndex from "~/components/intro/IntroIndex";
import {Swiper, SwiperSlide, directive} from 'vue-awesome-swiper';
// import { swiper, swiperSlide } from 'vue-awesome-swiper'

// import 'swiper/css/swiper.css'


export default {
  components: {
    Swiper,
    SwiperSlide,
    IntroIndex
  },
  directives: {
    swiper: directive
  },
  methods: {},
  data() {
    return {
      swiperOption: {
        autoplay: true,
        loop: true,
        effect: 'cube',
        cubeEffect: {
          shadowOffset: 100,
          shadowScale: 0.6
        },
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        }
      },
      slideList: [
        {
          id: '42',
          img: 'http://mi.futurefe.com/imgs/slider/slide-1.jpg'
        },
        {
          id: '45',
          img: 'http://mi.futurefe.com/imgs/slider/slide-2.jpg'
        },
        {
          id: '46',
          img: 'http://mi.futurefe.com/imgs/slider/slide-3.jpg'
        }
      ],
    }
  }
}
</script>

<style lang="scss">
.index {
  margin-top: 26px;

  .container {

    //box-sizing: border-box;
    width: 1200px;
    margin: 0 auto;

    .swiper-container {
      //height: 449px;
      //width: 800px;

      //img {
      //  width: 100%;
      //  height: 100%;
      //}
    }

  }
}
</style>
